/* 	MediaNavigation
*	Nice album navigation
*	
*	IMPORTANT
*
*	
*										*/

MediaNavigation = function( vars, set )	{
	
	Object.extend( obj = new Element( "div", { "class":"MediaNavigation" }), MediaNavigation_proto );
	obj.vars = vars;
	obj.current = 0;
	
	if( set ) obj.seed( set );
	else obj.pull();
	
	return obj;
}

MediaNavigation_proto =	{

	pull			: function() {
		xhttp.send( '/xhttp.js', {
			mod: "media.navigation",
			action: "pull",
			vars: this.vars
		}, this.pull_response );
	},
	
	seed_simple		: function( set ) {

		this.insert( this.img = new Element( "img", { src:'/public.img?sze=' + this.vars.size + '&id='+ set[0] } ));
		this.nav_overlay();
		this.current = 0;
	},
	
	seed			: function( set ) {
		this.set = set;
		this.insert( this.img = new Element( "img", { src:'/public.img?sze=' + this.vars.size + '&id='+ set[0].id } ));
		this.insert( new Element( "div" ));
		
		this.nav_overlay();
	},
	
	pull_response	: function( response ) {
		
		set = response.responseText.evalJSON();
		$$(".MediaNavigation")[0].seed( set );
	},		
	
	next			: function() {
		if( this.current == this.set.length -1 ) this.current = -1;
		this.img.src = '/public.img?sze=' + this.vars.size + '&id='+ this.set[ ++this.current ].id;
	},
	nav_overlay		: function() {

		this.observe( "mouseover", this.toggle_overlay );
		this.observe( "mouseover", this.toggle_overlay );
		this.observe( "click", this.next );
		
	},
	toggle_overlay	: function() {
		
	},
	
	//////////// NAVIGATION TYPES
	navigation_viewmaster	: function() {
	
		Object.extend( this.nav = new Element("div", { "class":"MediaNnvg_viewmaster"}), MediaNnvg_viewmaster_proto );
		$( this.vars.target ).insert( this.nav );
		this.nav.ref = this;
		
		this.nav.insert(new Element("div",{ "class":"status" }).update("klik..."));
		this.nav.insert(new Element("div",{ "class":"ico" }));
		this.nav.insert(bar = new Element("div", {"class":"bar"}));
		bar.insert(new Element("div",{ "class":"thumb left" }));
		bar.insert(new Element("div",{ "class":"thumb" }));
		this.nav.insert(control = new Element("div", {"class":"control"}));
		
		control.insert(new Element("div", { "class":"arright" }).observe("click", function(e){ this.ancestors()[1].flip(2); }));	
		control.insert(new Element("div", { "class":"arrleft"}).observe("click", function(e){ this.ancestors()[1].flip(-2); }));
		control.insert(new Element("ul", { "class":"num"}));
		
		this.nav.getstring = "&unt=1&sze=" + this.vars.size;
		this.nav.insert(new Element("div", {"class":"name"}).update(this.vars.name).observe("click", this.nav.flip));
		
	}
	
	
	
}

/////////// NAVIGATION FUNCTIONS

var MediaNnvg_viewmaster_proto = {

	seed	: function(values, obj) {
				if(!obj) obj = this;
				obj.values	= values;
				
				(obj.am = (obj.vars.am<values.length)? obj.vars.am:values.length).times(function(n) {
					$(obj.vars.id+".num").insert(li = new Element("li",{id:obj.vars.id+".n"+n}))
					li.observe("click", obj.show);
				});
				$(obj.vars.id+".thumb0").observe("click", obj.show);
				$(obj.vars.id+".thumb1").observe("click", obj.show);
				
				if(obj.vars.active) {
					obj.n = obj.cur = (obj.vars.random)? (Math.random()*(values.length-2)).round():0;
					tm = setTimeout(function(obj){ obj.show(); }, 1000, obj);  
				} else obj.flip(0);
				
	},
	flip	: function(add, override) {
				obj	= (this.className == "album")? this : this.ancestors()[ (this.ancestors()[1].vars)? 1:((this.ancestors()[2].vars)?2:0)];
				if(!add || typeof add != "number") obj.cur = 0;
				else obj.cur = (obj.cur+add<obj.values.length-1)? ((obj.cur+add>=0)? obj.cur+add : 0) : obj.values.length-2;
				
				$(obj.vars.id+".thumb0").update( new Element("img", {"src":"/engine.room/gfx/img.php?id="+obj.values[obj.cur]['ID']+obj.getstring}) );
				$(obj.vars.id+".thumb0").n = obj.cur;
				$(obj.vars.id+".thumb1").update(new Element("img", {"src":"/engine.room/gfx/img.php?id="+obj.values[obj.cur+1]['ID']+obj.getstring}) );
				$(obj.vars.id+".thumb1").n = obj.cur+1;
				
				span = (obj.cur+obj.am <= obj.values.length)? obj.cur : obj.values.length-obj.am;
				(obj.am).times(function(n) { li = $(obj.vars.id+".n"+n);
					li.update(n+span+1); li.n = span+n;
					if(span+n == obj.active) li.className = "active";
					else if(span+n == obj.cur || span+n == obj.cur+1) li.className = "demi";
					else li.className = "";
				});
				return album;
	},
	show	: function(e) {
				obj	= (this.className == "album")? this : this.ancestors()[ (this.ancestors()[1].vars)? 1:((this.ancestors()[2].vars)?2:0)];
				img		= $(obj.vars.trg).childElements()[0];
				img.src	= "/engine.room/gfx/img.php?sze="+obj.vars.trgsze+"&id="+obj.values[this.n].ID;
				img.observe("load", obj.loaded);
				obj.cur = obj.active = img.n	= this.n; img.refid	= obj.vars.id;
				$(obj.vars.id+".status").update("efkes...");
				obj.flip(1);
	},
	loaded	: function(e) {
				$(this.refid+".status").update((this.n+1)+" van "+$(this.refid+".album").values.length);
	}		
}



/*
mod.media		= {
	album		: function(vars) {
		
		obj.insert(new Element("div",{id:vars.id+".status", "class":"status"}).update("klik..."));
		obj.insert(new Element("div",{"class":"ico"}));
		obj.insert(bar = new Element("div", {"class":"bar"}));
		bar.insert(new Element("div",{id:vars.id+".thumb0", "class":"thumb" }));
		bar.insert(new Element("div",{id:vars.id+".thumb1", "class":"thumb" }));
		obj.insert(control = new Element("div", {"class":"control"}));
		
		control.insert(new Element("div", {id:vars.id+".arright", "class":"arright"}).observe("click", function(e){ this.ancestors()[1].flip(2); }));	
		control.insert(new Element("div", {id:vars.id+".arrleft", "class":"arrleft"}).observe("click", function(e){ this.ancestors()[1].flip(-2); }));
		control.insert(new Element("ul", {id:vars.id+".num", "class":"num"}));
		
		obj.getstring = "&unt=1&lay=1&sze="+vars.sze;
		obj.insert(new Element("div", {"class":"name"}).update(vars.name).observe("click", obj.flip));

		obj.vars	= vars;
		return obj;
	},
	_proto_		: } 

*/





